<template>
  <div>

  </div>
</template>

<script setup>
import {
  onActivated,
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated
} from 'vue';

onBeforeMount(() => {
  console.log("onBeforeMount  组件被挂载之前调用");
})

onMounted(() => {
  console.log("onMounted 组件挂载完成之后调用");
})


onBeforeUpdate(() => {
  console.log("onBeforeUpdate 组件即将因为响应式状态变更而更新其 DOM 树之前调用");
})


onUpdated(() => {
  console.log("onUpdated 组件因为响应式状态变更而更新其 DOM 树之后调用");
})


onBeforeUnmount(() => {
  console.log("onBeforeUnmount 组件实例被卸载之前调用");

})


onUnmounted(() => {
  console.log("onUnmounted 组件实例被卸载之后调用");
})


onActivated(()=>{
  console.log("onActivated");
})


</script>

<style lang="scss" scoped></style>
